Saltar al contenido principal

Introducción a JSX y expresión de componentes en React

¿Qué es JSX?​

JSX es una extensión de la sintaxis de JavaScript que permite escribir código que se parece mucho al HTML, pero con todo el poder de JavaScript detrás. JSX significa JavaScript XML, y es una herramienta poderosa que facilita la creación de interfaces de usuario en React. Aunque puede parecer que estás escribiendo HTML, en realidad estás escribiendo una combinación de JavaScript y XML que React procesa para renderizar elementos en la pantalla.

Ejemplo básico de JSX​

Aquí tienes un ejemplo simple de cómo se ve JSX en un componente React:

// Definimos un componente funcional llamado 'Saludo'
function Saludo() {
  // El componente retorna un elemento JSX
  return <h1>¡Hola, mundo!</h1>;
}

// Exportamos el componente para poder usarlo en otras partes de la aplicación
export default Saludo;

En este ejemplo, <h1> es una etiqueta JSX que React convierte en un elemento HTML cuando se renderiza en el navegador. Fíjate que aunque parece HTML, puedes usar lógica de JavaScript dentro de JSX.

Expresión de componentes con JSX​

Un componente en React es una función (o clase, pero nos enfocaremos en las funciones) que devuelve un pedazo de UI, que está escrito en JSX. Este enfoque hace que cada componente sea modular y reutilizable.

Propiedades y lógica en JSX​

JSX no solo te permite usar HTML dentro de JavaScript, sino también agregar lógica y propiedades de manera sencilla. Observa el siguiente ejemplo:

// Definimos un componente llamado 'SaludoPersonalizado'
function SaludoPersonalizado({ nombre }) {
  // Usamos una expresión JavaScript dentro de JSX con {}
  return <h1>¡Hola, {nombre}!</h1>;
}

// Usando el componente con diferentes nombres
function App() {
  return (
    <div>
      <SaludoPersonalizado nombre="Ana" />
      <SaludoPersonalizado nombre="Luis" />
    </div>
  );
}

export default App;

En este caso, {nombre} es una expresión de JavaScript que se evalúa dentro del JSX, lo que permite que React inserte el valor de nombre en el lugar correspondiente. Esto hace que JSX sea muy flexible y poderoso para construir interfaces dinámicas.

Puntos clave a tener en cuenta​

  • JSX debe estar envuelto en un solo elemento padre: En React, cada componente debe devolver un solo elemento padre. Si necesitas devolver múltiples elementos, envuélvelos en un contenedor como un <div> o un React.Fragment.

  • Las expresiones de JavaScript en JSX: Puedes usar cualquier expresión de JavaScript dentro de JSX envolviéndola entre llaves {}. Esto incluye operaciones matemáticas, llamadas a funciones y más.

  • JSX no es obligatorio, pero es conveniente: Aunque puedes escribir tu UI usando solo JavaScript, JSX hace que tu código sea más legible y fácil de escribir.

Ejemplo de JSX con condiciones​

function Saludo({ esDeDia }) {
  // Usamos un operador ternario para decidir qué mostrar
  return <h1>¡Buenas {esDeDia ? "días" : "noches"}!</h1>;
}

Aquí, {esDeDia ? "días" : "noches"} es una expresión que usa el operador ternario para decidir qué texto mostrar, dependiendo del valor de esDeDia.

Más información​

  • JSX
  • Componentes React
  • Expresiones JavaScript en JSX
  • Elementos JSX

Resumen​

JSX es una extensión de JavaScript que permite escribir código similar a HTML dentro de tus componentes React, combinando la facilidad de HTML con la potencia de JavaScript. Los componentes en React se expresan fácilmente usando JSX, y te permiten crear interfaces de usuario dinámicas y modulares. Al dominar JSX, simplificas enormemente la creación de aplicaciones en React, haciéndolas más legibles y fáciles de mantener.